<template>
  <div>
    <div v-show="!modal.show">
      <div style="padding:20px 20px 20px;background-color:white;">
        <a-form layout="inline" class="nmv-search-form-auto">
          <!-- <a-form-item label="">
            <a-select v-model="grid.queryParams.companyId" placeholder="请选择" show-search :filter-option="filterOption" class="nmv-w-100" allowClear>
              <a-select-option v-for="(item, i) in selectList" :key="i" :value="+item.id">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item> -->
          <a-form-item label="姓名">
            <a-input v-model="grid.queryParams.name" class="nmv-w-200" placeholder="请输入姓名"></a-input>
          </a-form-item>
          <a-form-item label="证件号">
            <a-input v-model="grid.queryParams.cardId" class="nmv-w-200" placeholder="请输入证件号"></a-input>
          </a-form-item>
          <a-form-item label="手机号">
            <a-input v-model="grid.queryParams.phone" class="nmv-w-200" placeholder="请输入手机号"></a-input>
          </a-form-item>
          <a-form-item label="性别">
            <a-select v-model="grid.queryParams.sex" placeholder="性别" show-search :filter-option="filterOption" class="nmv-w-80" allowClear @change="searchQuery">
              <a-select-option v-for="(item, index) in sexList" :key="index" :value="item.typeNameValue">{{item.typeNameValue}}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="报名批次">
            <a-select v-model="grid.queryParams.registerBatch" placeholder="请选择" show-search :filter-option="filterOption" class="nmv-w-200" allowClear @change="searchQuery">
              <a-select-option v-for="(item, i) in piciList" :key="i" :value="+item.typeNameValue">{{ item.typeNameValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="报名院校">
            <a-select v-model="grid.queryParams.registerSchool" placeholder="请选择" show-search :filter-option="filterOption" class="nmv-w-200" allowClear @change="searchQuery">
              <a-select-option v-for="(item, i) in xiaoList" :key="i" :value="item.typeNameValue">{{ item.typeNameValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="所报层次">
            <a-select v-model="grid.queryParams.registerLevel" placeholder="请选择" show-search :filter-option="filterOption" class="nmv-w-200" allowClear @change="searchQuery">
              <a-select-option v-for="(item, index) in cengciList" :key="index" :value="item.typeNameValue">{{item.typeNameValue }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="学习形式">
            <a-select v-model="grid.queryParams.studyType" placeholder="请选择" show-search :filter-option="filterOption" class="nmv-w-200" allowClear @change="searchQuery">
              <a-select-option v-for="(item, index) in xingshiList" :key="index" :value="item.typeNameValue">{{item.typeNameValue}}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="学生状态">
            <a-select v-model="grid.queryParams.studentStatus" placeholder="请选择" show-search :filter-option="filterOption" class="nmv-w-200" allowClear @change="searchQuery">
              <a-select-option v-for="(item, index) in statusList" :key="index" :value="item.typeNameValue">{{item.typeNameValue}}</a-select-option>
            </a-select>
          </a-form-item>
          <!-- <a-form-item label="车牌号">
            <a-input v-model="grid.queryParams.licensePlate" class="nmv-w-200" placeholder="请输入车牌号"></a-input>
          </a-form-item>
          <a-form-item label="返修单号">
            <a-input v-model="grid.queryParams.orderNo" class="nmv-w-200" placeholder="请输入返修单号"></a-input>
          </a-form-item>
          <a-form-item label="所属企业">
            <a-select v-model="grid.queryParams.companyId" placeholder="请选择企业" show-search :filter-option="filterOption"
              class="nmv-w-200">
              <a-select-option v-for="(item, i) in companiesAllListFilter" :key="i" :value="+item.id">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="所属门店">
            <a-select placeholder="全部门店" allowClear show-search :filter-option="filterOption" class="nmv-w-200"
              v-model="grid.queryParams.storeId" @change="searchQuery">
              <a-select-option v-for="item in storeList" :key="item.id" :value="+item.id">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="状态">
            <a-select placeholder="全部" allowClear @change="searchQuery" v-model="grid.queryParams.status"
              class="nmv-w-200 black_placeholders">
              <a-select-option :value="key" v-for="(name, key) in statusData" :key="key">{{ name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="提交时间">
            <a-range-picker style="width:320px;" v-model="time" format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']"
              @change="rangeTime"></a-range-picker>
          </a-form-item> -->
          <a-form-item>
            <a-button type="primary" @click="searchQuery">查询</a-button>
            <a-button style="margin-left:12px" @click="onReset">重置</a-button>
          </a-form-item>
          <a-form-item style="float:right;margin:0">
            <a-button class="float-r" style="margin-right:20px;"  @click="onExport">导出名单</a-button>
          </a-form-item>
        </a-form>
        <a-table :scroll="{ x: 1300 }" :loading="grid.load" :pagination="false" rowKey="id" :locale="locale"
          :columns="grid.columns" :data-source="grid.data">
          <span slot="name" slot-scope="text, record">
            <a-button type="link" @click="onSee(record)">{{record.name}}</a-button>
          </span>
          <span slot="registerBatch" slot-scope="text, record">
            <span v-for="(item, i) in piciList" :key="i">
              <span v-if="item.id == record.registerBatch">{{item.typeNameValue}}</span>
            </span>
          </span>
          <span slot="registerSchool" slot-scope="text, record">
            <span v-for="(item, i) in xiaoList" :key="i">
              <span v-if="item.id == record.registerSchool">{{item.typeNameValue}}</span>
            </span>
          </span>
          <span slot="studentStatus" slot-scope="text, record">
            <span v-for="(item, i) in statusList" :key="i">
              <span v-if="item.id == record.studentStatus">{{item.typeNameValue}}</span>
            </span>
          </span>
          <span slot="action" slot-scope="text, record">
            <a-button type="link" @click="onAudit(record)">修改</a-button>
          </span>

        </a-table>
        <div v-show="grid.total !== 0" style="text-align:right;">
          <a-pagination show-size-changer :current="grid.queryParams.pageNum" :pageSize="grid.queryParams.pageSize"
            @change="onChange" style="margin-top:20px;" size="small" @showSizeChange="onShowSizeChange"
            :total="grid.total" :show-total="total => `共${grid.total}条 `" />
        </div>
      </div>
    </div>
    <div v-show="modal.show && editFlag">
      <DeviceBackRepairEdit ref="deviceBackRepairEditRefs" @close="modalClose" />
    </div>
    <div v-show="modal.show && detailFlag">
      <DeviceBackRepairDetail ref="deviceBackRepairDetailRefs" @close="modalClose" />
    </div>
  </div>
</template>

<script>
import Empty from '@/components/Empty/Empty'
import { downLoadsV2 } from '@/utils/util.js'
import DeviceBackRepairEdit from './modal/deviceBackRepairEdit'
import DeviceBackRepairDetail from './modal/deviceBackRepairDetail'
import { typeList, listStudents, StudentsDownload } from '@/services/adminApi'
// import { AutoComplete } from 'ant-design-vue'
const STATUS = {
  1: '待审核',
  2: '审核不通过',
  3: '待商户发货',
  4: '待收货确认',
  5: '待返厂',
  6: '拒收退回',
  7: '退回已签收',
  8: '已返厂',
  9: '已结束',
  10: '待发货',
  11: '待签收',
  12: '已完成'
}
const BASE_URL = process.env.VUE_APP_API_URL
export default {
  components: {
    DeviceBackRepairDetail,
    DeviceBackRepairEdit
  },
  data () {
    return {
      editFlag: false,
      detailFlag: false,
      selectList: [
        { id: '1', name: '姓名' },
        { id: '2', name: '证件号' },
        { id: '3', name: '所报专业' },
        { id: '4', name: '手机' },
        { id: '5', name: 'Email' },
        { id: '6', name: '联系地址' },
        { id: '7', name: '联系电话' }
      ],
      sexList: [],
      cardList: [],
      piciList: [],
      xiaoList: [],
      cengciList: [],
      xingshiList: [],
      statusList: [],
      companiesAllListFilter: [],
      statusData: STATUS,
      locale: {
        emptyText: <Empty />
      },
      grid: {
        load: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            width: 100,
            scopedSlots: { customRender: 'name' }
          },
          {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            width: 100,
            customRender: (text) => text || '-'
            // customRender: (text, record) => +text === 0 ? <div>男</div> : +text === 1 ? <div>女</div> : '-'
          },
          {
            title: '证件号码',
            dataIndex: 'cardId',
            key: 'cardId',
            width: 170,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '报名批次',
            dataIndex: 'registerBatch',
            key: 'registerBatch',
            width: 100,
            ellipsis: true,
            scopedSlots: { customRender: 'registerBatch' }
          },
          {
            title: '报名院校',
            dataIndex: 'registerSchool',
            key: 'registerSchool',
            width: 130,
            scopedSlots: { customRender: 'registerSchool' }
          },
          {
            title: '报名专业',
            dataIndex: 'registerMajor',
            key: 'registerMajor',
            width: 130,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '学生状态',
            dataIndex: 'studentStatus',
            key: 'studentStatus',
            width: 100,
            ellipsis: true,
            scopedSlots: { customRender: 'studentStatus' }
          },
          {
            title: '手机',
            dataIndex: 'phone',
            key: 'phone',
            width: 160,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '注册时间',
            dataIndex: 'createDate',
            key: 'createDate',
            width: 180,
            customRender: (text) => text || '-'
          },
          {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            // fixed: 'right',
            width: 80,
            scopedSlots: { customRender: 'action' }
          }
        ],
        data: []
      },
      modal: {
        show: false
      },
      storeList: []
    }
  },
  created () {
    this.getInit()
    this.getList()
    // if (this.$route.query.id) {
    //   this.onSee({ id: this.$route.query.id })
    // }
  },
  methods: {
    // 初始化获取下拉菜单列表
    getInit () {
      this.getSex()
      this.getCard()
      this.getPici()
      this.getXuexiao()
      this.getCengci()
      this.getXingshi()
      this.getStatus()
    },
    async getSex () {
      const res = await typeList({ type: 1 })
      const { success, data: response, msg } = res
      if (success) {
        this.sexList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getCard () {
      const res = await typeList({ type: 2 })
      const { success, data: response, msg } = res
      if (success) {
        this.cardList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getPici () {
      const res = await typeList({ type: 3 })
      const { success, data: response, msg } = res
      if (success) {
        this.piciList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getXuexiao () {
      const res = await typeList({ type: 4 })
      const { success, data: response, msg } = res
      if (success) {
        this.xiaoList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getCengci () {
      const res = await typeList({ type: 5 })
      const { success, data: response, msg } = res
      if (success) {
        this.cengciList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getXingshi () {
      const res = await typeList({ type: 6 })
      const { success, data: response, msg } = res
      if (success) {
        this.xingshiList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getStatus () {
      const res = await typeList({ type: 7 })
      const { success, data: response, msg } = res
      if (success) {
        this.statusList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    onSee (row) {
      this.modal.show = true
      this.editFlag = false
      this.detailFlag = true
      this.$nextTick(() => {
        this.$refs.deviceBackRepairDetailRefs.onInitial(row)
      })
    },
    // 修改
    onAudit (row) {
      // this.$router.push({ path: '/data/data/offlineData', query: { id: '10001' } })
      this.modal.show = true
      this.editFlag = true
      this.detailFlag = false
      this.$nextTick(() => {
        this.$refs.deviceBackRepairEditRefs.onInitial(row)
      })
    },
    // 导出
    async onExport () {
      delete this.grid.queryParams.pageNum
      delete this.grid.queryParams.pageSize
      const res = await StudentsDownload(this.grid.queryParams)

      const completePath = `${BASE_URL}/files/` + res.data
      downLoadsV2('学生信息导出.xlsx', completePath)
      // downLoads('学生信息导出.xlsx', res)
    },
    modalClose () {
      this.modal.show = false
      this.searchQuery()
    },
    onChange (page, pageSize) {
      this.grid.queryParams.pageNum = page
      console.log(pageSize)
      this.searchQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.grid.queryParams.pageSize = pageSize
      this.grid.queryParams.pageNum = 1
      console.log(current)
      this.searchQuery()
    },
    async getList () {
      this.grid.load = true
      const res = await listStudents(this.grid.queryParams)
      // console.log(res)
      if (res.success) {
        this.grid.data = res.data.records
        this.grid.total = res.data.total
        this.grid.load = false
      } else {
        this.grid.load = false
      }
    },
    rangeTime (value) {
      if (value.length > 0) {
        const [start, end] = value
        this.grid.queryParams.beginCreateTime = start.format('YYYY-MM-DD')
        this.grid.queryParams.endCreateTime = end.format('YYYY-MM-DD')
      } else {
        delete this.grid.queryParams.beginCreateTime
        delete this.grid.queryParams.endCreateTime
        this.time = []
      }
      this.searchQuery()
    },
    searchQuery (type) {
      if (type) {
        this.grid.queryParams.pageNum = 1
        this.grid.queryParams.pageSize = 10
      }
      this.getList()
    },
    onReset () {
      this.grid.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>
